<template>
	<view class="container">
		<!-- 顶部导航 -->
		<Header></Header>

		<!-- 王氏家族横幅 -->
		<view class="banner">
			<!-- <image src="@/static/familyBanner.png" class="banner-image" mode="widthFix" /> -->
			<image :src="template_info.bgImage == '' || !template_info.bgImage ? '@/static/familyBanner.png' : template_info.bgImage" class="banner-image" mode="widthFix" />
			<text>{{ familyInfo.name }}</text>
		</view>
		
		<!-- 导语模块 -->
		<view class="intro">
			<text class="intro-title">导语</text>
			<view class="intro-content">{{ familyInfo.intro || '暂无导语' }}</view>
		</view>

		<!-- 人物纪念馆 -->
		<view class="memorial">
			<view class="memorial-title">
				人物纪念馆
			</view>
			<view class="memorial-list" v-if="graveyardList.length > 0">
				<view class="memorial-list-item" v-for="(item, index) in graveyardList" @click="goToGraveyard(item)">
					<image :src="item.avatar" mode=""></image>
					<text>{{ item.mu_name }}</text>
				</view>
			</view>
			<view class="empty" v-else>
				<van-empty description="暂无人物纪念馆" />
			</view>
		</view>

		<view class="tabBox">
			<!-- Tab 切换 -->
			<van-tabs v-model="activeTabPage" @change="onTabChange">
				<van-tab :title="familyInfo.type == 1? '家族介绍' : '集体馆介绍'" name="0" />
				<van-tab :title="familyInfo.type == 1? '家族馆动态/文化' : '集体馆动态/文化'" name="1" />
				<van-tab title="留言列表" :name="2" />
			</van-tabs>
			
			<!-- 内容区域 -->
			<view class="tabView" v-if="activeTabPage == 0">
				<!-- 动态列表 -->
				<view class="tabView-content" v-if="familyInfo.desc != ''">
					{{ familyInfo.desc }}
				</view>
				<view class="empty" v-else>
					<van-empty description="暂无家族介绍" />
				</view>
			</view>
			
			<!-- 动态列表 -->
			<view class="tabView" v-if="activeTabPage == 1">
				<view class="tabView-list" v-if="totalArticles.length > 0">
					<view class="tabView-list-item" v-for="(item, index) in totalArticles">
						<text>{{ item.title }}</text>
						<text>{{ item.create_time }}</text>
					</view>
				</view>
				<view class="empty" v-else>
					<van-empty description="暂无动态列表" />
				</view>
			</view>
			<view class="tabView" v-if="activeTabPage == 2">
				<view class="tabView-leavelList" v-if="leaveNoteList.length > 0">
					<view class="tabView-leavelList-item" v-for="(item, index) in leaveNoteList">
						<view class="tabView-leavelList-item-image">
							<image :src="item.jidian_info.file_url" mode=""></image>
						</view>
						<view class="tabView-leavelList-item-content">
							<text class="tabView-leavelList-item-content-text">{{ item.content }}</text>
							<view class="tabView-leavelList-item-content-info">
								<text>签名：{{ item.sign_name }}</text>
								<text>{{ item.create_time }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="empty" v-else>
					<van-empty description="暂无留言列表" />
				</view>
			</view>
		</view>
		
		<view class="footer">
			<!-- 追思留言按钮 -->
			<van-button type="primary" text="追思留言" round class="leave-btn" @click="showMessageDialog = true" />
			<image src="/static/qrCodeIcon.png" mode="" class="footer-qrcode" @click="openShowQRcode"></image>
		</view>

		<up-popup :show="showQrCode" mode="center" round  :safeAreaInsetBottom="false" :closeOnClickOverlay="true" :closeable="true" :closeIconPos="closeIconPos" @close="showQrCode = false">
			<view class="" style="padding: 80rpx 20rpx 20rpx 20rpx;">
				<image :src="qrCodeImage" mode="aspectFit" @click="clickQRcode"></image>
				<!-- <up-qrcode :size="300" :val="qrCodeImage" cid="up-qrcode"  ref="qrCodeRef" @click="clickQRcode"></up-qrcode> -->
				<view class="popup-tips">
					点击二维码后，长按二维码进行下载与分享
				</view>
			</view>
			<view class="download-btn-container" v-if="platform == 'h5'">
				<van-button type="primary" text="下载二维码" @click="clickQRcode" />
			</view>
		</up-popup>
		<!-- 分享 -->
		<!-- <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" z-index="99999" /> -->
			
		<van-popup v-model:show="showMessageDialog" :style="{ height: '80%' }" position="bottom" round>
			<view class="leavelPopup">
				<view class="popup-content" @click.stop>
					<text class="popup-title">追思留言</text>
					<!-- 留言输入 + 图标 -->
					<view class="input-group">
						<text class="label">留言：</text>
						<textarea class="textarea" v-model="formData.content" placeholder="请输入留言内容"></textarea>
						<view class="icon-group">
							<view class="icon-item" v-for="(icon, i) in jidianCateList" :key="i"
								@click="changejidian(icon.id)">
								<text class="icon-text"
									:class="activeTab == icon.id ? 'acive' : ''">{{ icon.name }}</text>
							</view>
						</view>
						<view class="giftList">

							<u-radio-group v-model="formData.jidian_id" placement="row" @change="getRadioChange">
								<view v-for="item in jidianList" :key="item.id" class="option-item"
									@click="formData.jidian_id = item.id">
									<image :src="item.file_url" class="item-img" mode="aspectFill" />
									<text class="item-name">{{ item.name }}</text>
									<view class="radio-indicator">
										<u-radio :name="item.id" shape="circle" />
										<!-- <view class="circle" :class="{ active: formData.jidian_id === item.id }" /> -->
									</view>
								</view>
							</u-radio-group>
						</view>
					</view>
					<!-- 留言人 -->
					<view class="input-group">
						<text class="label">留言人：</text>
						<input class="input-field" v-model="formData.sign_name" placeholder="请输入您的姓名" />
					</view>

					<!-- 发送按钮 -->
				</view>
				<view class="leavelPopup-footer">
					<up-button class="create-btn" @click="sendMessage">发送留言</up-button>
				</view>
			</view>
		</van-popup>

	</view>
</template>

<script setup lang="ts">
	import Header from '@/components/header/index.vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, reactive, onMounted, nextTick, toRaw } from 'vue';
	import { Toast } from 'vant';
	import { familyDetail, mu_list, jidian_list, article_list, check_user_join, add_jidian } from '@/api/family'
	import { share_img } from '@/api/user'
	import { apiMuJidianCate, apiMuJidianList } from '@/api/leaveNote'
	import { jsConfig } from '@/api/pay.js'
	// import wx from 'weixin-js-sdk';
	import { useUserStore } from '@/stores/index.js'
	
	
	// 模版
	const template_info = ref({})
	const template_Data = ref([
		{
			id: 1, bgImage: 'https://cqjsyh.com/uploads/images/20250710/20250710213932d0f904282.png'
		},
		{
			id: 2, bgImage: 'https://cqjsyh.com/uploads/images/20250710/20250710213932120571713.png'
		},
		{
			id: 3, bgImage: 'https://cqjsyh.com/uploads/images/20250710/20250710213932819ab4439.png'
		},
		{
			id: 4, bgImage: 'https://cqjsyh.com/uploads/images/20250710/20250710213932285f33599.png'
		},
		{
			id: 5, bgImage: 'https://cqjsyh.com/uploads/images/20250710/202507102139322903f1615.png'
		},
	])
	
	
	
	
	// 状态管理
	const closeIconPos = ref('top-right')
	const activeTabPage = ref('0');
	const showMessageDialog = ref(false); // 弹窗留言
	const showQrCode = ref(false) // 弹窗二维码
	const qrCodeImageUrl = ref('https://cqjsyh.com/H5/pages/family/index') // 二维码
	const qrCodeImage = ref('') // 二维码
	// 分享
	// const showShare = ref(false);
	const options = [
		{ name: '下载图片', icon: 'https://cqjsyh.com/uploads/images/20250707/202507071652423d7130051.png' }
	];
	const familyInfo = ref({})
	const getFamilyDetail = async () => {
		const res = await familyDetail({ id: Number(family_id.value) })
		familyInfo.value = res.data
		// qrCodeImage.value = 'https://cqjsyh.com/H5/pages/family/index' + '?family_id' + res.data.id
		
		const str = await share_img({url: qrCodeImageUrl.value, family_id: res.data.id})
		console.log(str)
		qrCodeImage.value = str.data.url
		
		template_info.value = template_Data.value.find((item: any)=> item.id == res.data.template_id) || {}
	}
	
	// 留言表单数据
	const formData = ref<{
		content : string,
		sign_name : string,
		family_id : number | null,
		jidian_id : number | null
	}>({
		content: '',
		sign_name: '',
		family_id: null,
		jidian_id: null
	})

	// 获取人物纪念列表
	const family_id = ref()
	// 获取纪念馆列表
	const graveyardList = ref([])
	const getMu_list = async () => {
		const res = await mu_list({ family_id: family_id.value, page_no: 1, page_size: 10 })
		graveyardList.value = res.data.list
	}
	// 获取祭祀分类
	const jidianCateList = ref([])
	const activeTab = ref(0)
	const getJidianCate = async () => {
		const res = await apiMuJidianCate()
		jidianCateList.value = res.data
		if (res.data.length > 0) {
			activeTab.value = res.data[0].id
			getJidianList(res.data[0].id)
		}
	}

	// 获取祭祀列表
	const jidianList = ref([])
	const getJidianList = async (id : number) => {
		const res = await apiMuJidianList({ cid: id })
		jidianList.value = res.data
	}

	// 获取家族文章列表
	const mainArticles = ref([])
	const totalArticles = ref([])
	const totalArticlesCount = ref(0)
	const getArticleDataList = async () => {
		const res = await article_list({ family_id: Number(family_id.value), page_no: 1, page_size: 10 })
		totalArticles.value = res.data.list
		totalArticlesCount.value = res.data.total
		// mainArticles.value = res.list
	}

	// 获取家族留言列表
	const leaveNoteList = ref([])
	const getLeaveDataList = async () => {
		const res = await jidian_list({ family_id: Number(family_id.value), page_no: 1, page_size: 10 })
		console.log(res)
		leaveNoteList.value = res.data.list
	}
	// 组件引用
	const qrCodeRef = ref(null);

	const openShowQRcode = async () => {
		showQrCode.value = true
	}
	
	// 点击二维码
	const clickQRcode = async () => {
		const link = document.createElement('a');
		link.href = qrCodeImage.value;
		link.download = 'image.png';
		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);
	}
	

	
	// 切换祭奠分类
	const changejidian = (id : number) => {
		activeTab.value = id
		getJidianList(id)
	}

	// 切换墓地家族功能
	const onTabChange = async (event : any) => {
		activeTabPage.value = event

		console.log(event)
		if(event == 0){
			getArticleDataList()
		}
		else if(event == 1){
			getArticleDataList()
		}
		else if(event == 2){
			getLeaveDataList()
		}
	}
	
	// 
	const getRadioChange = (event: any) => {
		console.log(event)
	}
	// 
	const sendMessage = () => {
		if(!formData.value.jidian_id || formData.value.jidian_id == null){
			uni.showToast({
				title: '请选择留言祭品',
				icon: 'none',
				duration: 1000
			})
			return false
		}
		if(!formData.value.content || formData.value.content == null){
			uni.showToast({
				title: '请输入留言内容',
				icon: 'none',
				duration: 1000
			})
			return false
		}
		if(!formData.value.sign_name || formData.value.sign_name == null){
			uni.showToast({
				title: '请输入留言人昵称',
				icon: 'none',
				duration: 1000
			})
			return false
		}
		let obj = formData.value
		obj.family_id = Number(family_id.value)
		add_jidian(obj).then(res=>{
			console.log(res)
			if(res.code == 1){
				uni.showToast({
					title: '提交成功',
					icon: 'none',
					duration: 1000
				})
				showMessageDialog.value = false
				getLeaveDataList()
			}else{
				uni.showToast({
					title: '提交失败',
					icon: 'none',
					duration: 1000
				})
				showMessageDialog.value = false
			}
		}).catch(error=>{
			console.log(error)
			uni.showToast({
				title: '提交失败',
				icon: 'none',
				duration: 1000
			})
			showMessageDialog.value = false
		})
	}
	
	// 去纪念馆
	const goToGraveyard = (item: any) => {
		console.log(toRaw(item))
		uni.navigateTo({
			url: '/pages/individualSpace/index?id=' + item.id
		})
	}
	
	
	const platform = ref('')
	onLoad((options) => {
		// 模拟加载更多数据
		family_id.value = options.family_id

		getJidianCate()
		getFamilyDetail()
		getMu_list()
		getArticleDataList()
		getLeaveDataList()
		formData.value.sign_name = useUserStore().userInfo.nickname
		platform.value = uni.getSystemInfoSync().platform
	})
</script>

<style scoped lang="scss">
	.container {
		background-color: #f7f8fa;
		height: calc(100vh - 88rpx - 30px - 20rpx);
		overflow-y: scroll;
	}

	.banner {
		width: 100%;
		height: 158rpx;
		position: relative;
	}

	.banner-image {
		width: 100%;
		height: 100%;
	}

	.banner text {
		font-family: cursive;
		font-weight: bold;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		font-size: 28px;
	}

	.intro-card {
		margin: 15px;
	}

	.intro-desc {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
	}

	.memorial-card {
		margin: 10px 15px;
	}

	.leave-btn {
		// left: 50%;
		// transform: translateX(-50%);
		width: calc(100% - 100rpx);
		height: 88rpx;
		
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		border-radius: 50rpx;
		border: none;
		background: linear-gradient(135deg, #C9AC83, #B8956F);
		color: #fff;
		box-shadow: 0 4rpx 20rpx rgba(201, 172, 131, 0.4);
	}

	.footer {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 30px;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		max-width: 750rpx;
	}

	.footer-qrcode {
		width: 80rpx;
		height: 80rpx;
		margin-left: 20rpx;
	}

	.icon-group {
		display: flex;
		justify-content: space-around;
		padding: 15px 0;
	}

	.icon-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.icon-img {
		width: 40px;
		height: 40px;
	}

	.icon-text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}


	

	.popup-title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20rpx;
		display: block;
	}

	/* 弹窗表单 */
	.input-group {
		width: 100%;
		margin-bottom: 20rpx;
	}

	.label {
		font-size: 26rpx;
		display: block;
		margin-bottom: 10rpx;
	}

	.textarea {
		width: 100%;
		height: 150rpx;
		border: 1px solid #ccc;
		border-radius: 5rpx;
		padding: 10rpx;
		box-sizing: border-box;
		font-size: 24rpx;
	}

	.icon-group {
		display: flex;
		gap: 20rpx;
		margin-top: 10rpx;
	}

	.icon-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.icon-img {
		width: 60rpx;
		height: 60rpx;
	}

	.icon-text {
		font-size: 22rpx;
		margin-top: 5rpx;
	}

	.input-field {
		width: 100%;
		height: 72rpx;
		border: 1px solid #ccc;
		border-radius: 5rpx;
		padding: 10rpx;
		box-sizing: border-box;
		font-size: 24rpx;
	}

	.captcha-code {
		margin-left: 10rpx;
		font-size: 24rpx;
		color: #333;
	}

	


	.acive {
		color: #f00;
	}





	.option-item {
		width: 200rpx;
		border: 2rpx solid #ccc;
		border-radius: 20rpx;
		overflow: hidden;
		text-align: center;
		padding: 20rpx 0;
		position: relative;
	}

	.item-img {
		width: 100%;
		height: 200rpx;
		object-fit: cover;
	}

	.item-name {
		margin-top: 10rpx;
		font-size: 28rpx;
		color: #333;
	}

	.radio-indicator {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
	}

	.circle {
		width: 30rpx;
		height: 30rpx;
		border: 2rpx solid #999;
		border-radius: 50%;
		background-color: #fff;
	}

	.circle.active {
		border-color: #007aff;
		background-color: #007aff;
	}
	.popup-tips{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
		box-sizing: border-box;
		font-size: 28rpx;
	}
	.create-btn {
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		border-radius: 50rpx;
		border: none;
		background: linear-gradient(135deg, #C9AC83, #B8956F);
		color: #fff;
		box-shadow: 0 4rpx 20rpx rgba(201, 172, 131, 0.4);
		width: 100%;
		height: 80rpx;
	}
	.empty{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	@import '@/styles/family.scss'
	
	
	
</style>